<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>
    <body>
        <div id='app'>

            <cmt-box @func="loadComments"></cmt-box>

            <!-- 评论列表 -->
            <ul class="list-group">
                <li class="list-group-item" v-for="item in list" :key="item.id">
                    <span class="badge">评论人： {{item.user}}</span>
                    {{item.content}}
                </li>
            </ul>
            <!-- 评论列表结束 -->
        </div>
        <template id="tmp1">
            <div>
                <div class="form-group">
                    <label>评论人：</label>
                    <input type="text" class="form-control" v-model="user">
                </div>
                <div class="form-group">
                    <label>评论内容：</label>
                    <textarea class="form-control" v-model="content"></textarea>
                </div>
                <div class="form-group">
                    <input type="button" class="btn btn-primary" value="发表评论" @click="postComment">
                </div>                    
            </div>
            
        </template>
    </body>
    <script>
        let commentBox = {
            template:'#tmp1',
            data(){
                return {
                    user:'',
                    content:''
                }
            },
            methods:{
                postComment(){
                    if(this.user == '' || this.content == ''){
                        alert("请填写正确内容")
                        return
                    }
                    // 分析：发表评论的业务逻辑
                    // 1、评论数据存到哪里去？？ 存放到 localStorage 中
                    // 2、先组织出一个最新的评论数据对象
                    // 3、想办法，把 第二步中，得到的评论对象。保存到 localStorage中
                    // 3.1localStorage 只支持存放字符串数据，要先调用JSON.stringify
                    // 3.2在保存最新的评论数据之前，要先从localStorage获取到之前评论数据
                    // 3.3需要先判断localStorage中有无数据，若没有，返回"[]"
                    // 3.4发最新的列表数据，再次调用JSON。stringify转为数组字符串
                    let comment = {id:Date.now(),user:this.user,content:this.content}
                    // 从localStorage中获取评论
                    let list = JSON.parse(localStorage.getItem('cmts') || "[]")
                    list.unshift(comment)
                    // 重新保存
                    localStorage.setItem('cmts',JSON.stringify(list))

                    this.user = ''
                    this.content = ''

                    this.$emit("func")
                }
            }
        }
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                list:[]
            },
            methods:{
                // 从本地的localStorage中，加载评论
                loadComments(){
                    let list = JSON.parse(localStorage.getItem('cmts') || "[]")
                    this.list = list
                }
            },
            components:{
                'cmt-box':commentBox
            },
            created() {
                this.loadComments()
            },
        })
    </script>
</html>